<template>
  <el-card>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>

      <el-breadcrumb-item>新闻管理</el-breadcrumb-item>
      <el-breadcrumb-item>所有文章</el-breadcrumb-item>
    </el-breadcrumb>
    <h2>
      所有文章
      <el-button
        type="success"
        icon="el-icon-edit"
        size="mini"
        round
        style="margin-left:20px"
        @click="write"
      >写文章</el-button>
    </h2>
    <el-select v-model="filter.classId" placeholder="分类" clearable>
      <el-option
        :label="item.name"
        :value="item.classId"
        v-for="item in classList"
        :key="item.classId"
      ></el-option>
    </el-select>
    <el-select placeholder="状态" v-model="filter.state" clearable>
      <el-option label="草稿" value="0"></el-option>
      <el-option label="已发布" value="1"></el-option>
    </el-select>
    <el-button type="primary" icon="el-icon-finished" id="filter" size="mini" @click="filtrate">筛选</el-button>
    <el-button type="warning" icon="el-icon-refresh-left" size="mini" @click="closeFiltrate">取消</el-button>
    <el-table :data="newsList" border style="width: 100%" stripe>
      <el-table-column type="index"></el-table-column>
      <el-table-column prop="title" label="标题" width="180"></el-table-column>
      <el-table-column prop="name" label="类别" width="180"></el-table-column>
      <el-table-column prop="date" label="添加日期" width="180"></el-table-column>
      <el-table-column prop="state" label="状态" width="180">
        <template slot-scope="scope">
          <p v-if="scope.row.state==0">草稿</p>
          <p v-if="scope.row.state==1">已发布</p>
        </template>
      </el-table-column>
      <el-table-column prop="userName" label="作者" width="180"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            type="primary"
            icon="el-icon-edit"
            size="mini"
            @click="turnToNewsEdit(scope.row.newsId)"
          ></el-button>

          <el-button
            type="danger"
            icon="el-icon-delete"
            size="mini"
            @click="deleteNewsById(scope.row.newsId)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>
<script>
// eslint-disable-next-line semi
export default {
  // eslint-disable-next-line space-before-function-paren
  data () {
    return {
      // 筛选条件
      filter: {
        classId: '',
        state: ''
      },
      // 新闻列表
      newsList: [],
      // 分类列表
      classList: []
    }
  },
  created () {
    this.getNewsList()
    this.getClassList()
  },
  methods: {
    // 获取新闻列表
    async getNewsList () {
      const { data: res } = await this.$http.get(
        '/api/news'
      )
      console.log(res.Table)
      this.newsList = res.Table
    },
    // 获取分类列表
    async getClassList () {
      const { data: res } = await this.$http.get('api/class')
      this.classList = res.Table
    },
    // 删除
    async deleteNewsById (id) {
      const removeNewsById = await this.$confirm(
        '此操作将永久删除该文件, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch(err => err)

      // 取消了删除
      if (removeNewsById !== 'confirm') {
        return this.$message.info('取消了删除')
      }
      console.log(id)
      const { data: res } = await this.$http.post('api/news?value=' + id)
      console.log(res)

      if (res.status !== 200) return this.$message.error('删除记录失败')
      this.$message.success('删除记录成功')
      this.getNewsList()
    },
    // 点击写文章按钮
    write () {
      // ti奥转到指定路由
      this.$router.push('/home/write')
    },
    // 带着参数跳转到发布文章页面
    turnToNewsEdit (id) {
      this.$router.push('/home/write?newsId=' + id)
    },
    // 点击筛选按钮
    async filtrate () {
      if (this.filter.state === '' && this.filter.classId === '') {
        return this.$message.error('请选择筛选条件')
      }
      const { data: res } = await this.$http.get(
        '/api/news?classId=' + this.filter.classId + '&state=' + this.filter.state
      )
      this.newsList = res.Table
      // console.log(res.Table[0])
    },
    // 点击取消筛选按钮
    closeFiltrate () {
      this.filter.state = ''
      this.filter.classId = ''
      this.getNewsList()
    }
  }

}
</script>
<style lang="less" scoped>
.el-select {
  margin-bottom: 20px;
  margin-right: 10px;
}
#filter {
}
</style>
